<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>鑫多多</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script src="../js/angular/angular.min.js"></script>
		<script src="../js/angular/angular-resource.js"></script>
		<script src="../js/angular/common.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/service/messageService.js"></script>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<link href="../css/image.css" rel="stylesheet" />
		
	</head>

	<body ng-app="mainApp" ng-controller="messageTalkListCtrl" >
		<header class="mui-bar mui-bar-nav mui-bar-detail">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">{{msgComeFrom}}</h1>
		</header>
		<div  class="mui-content chat">
			<div class="mui-scroll-wrapper" style="height: auto; margin: 5px 0;" id="pullrefresh">
				<div class="mui-scroll">
					<div id="msg-list"  >
						<div ng-repeat="msg in messageTalkList">
							<div class="msg-item" ng-if="userId!=msg.publishUser">
								<i class="msg-user-img name_short">{{msg.publishUserName|subStr}}</i>
								<div class="msg-content">
									<div ng-if="msg.type=='text'" class="msg-content-inner">
										{{msg.content}}
									</div>
									<div ng-if="msg.type=='msg'" class="msg-content-inner">
										<img ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{msg.content}}" width="200px" data-preview-src="" data-preview-group="1">
									</div>
									<div class="msg-content-arrow"></div>
								</div>
								<div class="mui-item-clear"></div>
							</div>
							<div ng-if="userId==msg.publishUser" class="msg-item msg-item-self">
								<i class="msg-user name_short">我</i>
								<div class="msg-content">
									<div ng-if="msg.type=='text'" class="msg-content-inner">
										{{msg.content}}
									</div>
									<div ng-if="msg.type=='msg'" class="msg-content-inner">
										<img ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{msg.content}}" width="200px" data-preview-src="" data-preview-group="1">
									</div>
									<div class="msg-content-arrow"></div>
								</div>
								<div class="mui-item-clear"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer class="chat_footer" style=" padding-left:50px;">
			<div class="footer-left">
				<i id='msg-image' class="mui-icon mui-icon-plus" ng-click="inputImageClick()"  ></i>
			<input type="file" hidden id="inputImage" onchange="angular.element(this).scope().inputImageChange()"  />
			</div>
			<div class="footer-center">
				<textarea id="msg-text" type="text" class="input-text"  ng-model="msgContent"></textarea>
			</div>
			<label for="" class="footer-right">
				<span></span>
				<span class="mui-btn mui-btn-success" ng-click="sendMsg()">
					发送
				</span>
		</footer>
		
		<script type="text/javascript">
			

			mainApp.controller('messageTalkListCtrl', function($scope, $http,messageService) {
				$scope.baseUrl = baseUrl;
				//拼页面
				var  makepage=function(msgContent,type,textType){
					var html = document.getElementById("msg-list").innerHTML;
					var str_html="";
					if(type=='right'){
						str_html="<div class='msg-item msg-item-self'><i class='msg-user name_short'>我</i><div class='msg-content'>"
					}else if(type=='left'){
						str_html="<div ><i class='msg-user name_short'>我</i><div class='msg-content'>"	
					}
					if(textType=="text"){
						str_html=str_html+"<div class='msg-content-inner'>"+msgContent+"</div><div class='msg-content-arrow'></div></div><div class='mui-item-clear'></div></div>";
					}else if(textType=="image"){
						var imageUrl=$scope.baseUrl+"/dapi/download/getImageIO?imgUrl="+msgContent;
						str_html=str_html+"<div class='msg-content-inner'><img src='"+imageUrl+"' width='200px' data-preview-src='' data-preview-group='1'></div><div class='msg-content-arrow'></div></div><div class='mui-item-clear'></div></div>";
					}
					document.getElementById("msg-list").innerHTML=html+str_html;
				}
				var tttt;
				mui.plusReady(function(){
				    var self = plus.webview.currentWebview();
				    var token=self.token;
				    $scope.token=token;
				    $scope.msgComeFrom=self.cusName;
				    $scope.receiveUser=self.receiveUser;
				    var users = JSON.parse(localStorage.getItem('$users') || '[]');
					users.some(function(user) {
						$scope.userId=user.id;
					});
					//初始化列表数据
					if($scope.userId!=undefined){
						getList(token);

					}
					
					mui.init({
						pullRefresh: {
							container: '#pullrefresh',
							down: {
								style:'circle',
								callback: pulldownRefresh
							}
						}
					});
					/**
					 * 下拉刷新具体业务实现
					 */
					function pulldownRefresh() {
						setTimeout(function() {
							getList(token);
							mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
						}, 1000);

					}
					var success_m=function(data){
						$scope.msgContent="";
						
					}
					
					
					$scope.sendMsg=function(){
						if($scope.msgContent==""||$scope.msgContent==null){
							return;
						}
						makepage($scope.msgContent,'right',"text");
						$scope.msg={"content":$scope.msgContent,"publishUser":$scope.userId,"receiveUser":$scope.receiveUser,"token":token};
						messageService.addMsg($scope.msg,success_m,error);
					}
					
					var uploadFile=function (formData) {
	                   $http({
	                        method:'POST',
	                        url:baseUrl+"/dapi/upload/link",
	                        data: formData,
	                        headers: {'Content-Type':undefined},
	                        transformRequest: angular.identity
	                    }).success(function(data){
	                    	console.info(JSON.stringify(data.data));
	                    	if(data.data!=null&&data.data!=undefined){
	                    		makepage(data.data,'right',"image");
								$scope.msg={"content":data.data,"publishUser":$scope.userId,"receiveUser":$scope.receiveUser,"token":token,type:"msg"};
								messageService.addMsg($scope.msg,success_m,error);
	                    	}
	                    });
	                };
					
					$scope.inputImageClick=function(){
						document.getElementById("inputImage").click();
					}
					$scope.inputImageChange=function(){
						var formData = new FormData();
	                    if(document.querySelector('input[type="file"]').files[0]!=null){
	                        formData.append("file",document.querySelector('input[type="file"]').files[0]);
	                    }else{
	                        mui.alert("请选择文件");
	                    }
						uploadFile(formData);
					}
					
				
				});
				$scope.pageIndex=1;
				$scope.pageSize=15;
				$scope.messageTalkList;
				var getList = function(token){
					
					//请求消息列表数据
					messageService.getMessageTalkList(token,$scope.pageIndex,$scope.pageSize,function(data){
						if($scope.pageIndex==1){
							$scope.messageTalkList = data.data.list;
						}else{
							angular.forEach(data.data.list, function(msg) {
								$scope.messageTalkList.unshift(msg);
							});
						}
						if(data.data.list!=undefined&&data.data.list.length!=0){
							$scope.pageIndex=$scope.pageIndex+1;
						}
						
						if(tttt==null){//查看任务是否存在
							createInterval(token);
						}
						mui.previewImage();
					}, function(err){
						console.info(err);
					});
				};
				//获取历史消息
				$scope.getOldMsg=function(){
					getList
				}
				
				//创建循环任务
				var createInterval=function(token){
					$scope.token=token;
					tttt=setInterval(function(){
						messageService.getIfMsg($scope.token,function(data){
							if(data.data){
								//获取最新唯独消息
								messageService.getLastMsg($scope.token,function(data){
									angular.forEach(data.data, function(msg) {
										var html = document.getElementById("msg-list").innerHTML;
										var str_html="<div class='msg-item'><i class='msg-user-img name_short'>"+msg.publishUserName+"</i><div class='msg-content'>"	
										+"<div class='msg-content-inner'>"+msg.content+"</div><div class='msg-content-arrow'></div></div>"+
										"<div class='mui-item-clear'></div></div>";
										document.getElementById("msg-list").innerHTML=html+str_html;
									});
								},function(err){});
							}
						},function(err){});
					},2000);
				//clearInteval(tttt);
				}
				
				
				
				
				
				
			});
		</script>
	</body>

</html>